<template>
  <div class="applyadoption">
    <div id="classificationlist">
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
      >
        <el-table-column label="名字" prop="name"> </el-table-column>
        <el-table-column label="电话" prop="phone"> </el-table-column>
        <el-table-column label="地址" prop="address"> </el-table-column>
        <el-table-column label="宠物名称" prop="petname"> </el-table-column>
        <el-table-column label="种类" prop="petclassname"> </el-table-column>
        <el-table-column label="状态" prop="state" class="state">
        </el-table-column>
        <el-table-column align="right">
          <template slot="header"> 操作 </template>
          <template>
            <el-button size="mini" @click="handleEdit">{{
              AgreedToNo
            }}</el-button>
            <el-button size="mini" type="danger" @click="open">{{
              refused
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination small layout="prev, pager, next" :total="50">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "ApplyAdoption",
  data() {
    return {
      AgreedToNo: "同意",
      tableData: [],
      search: "",
      refused: "拒绝",
    };
  },
  beforeMount() {
    // 获取数据
    this.axios.get("/applyadoption").then((res) => {
      this.tableData = res.data.applyadoption;
    });
  },
  methods: {
    handleEdit() {
      this.AgreedToNo = "已同意";
    },
    open() {
      this.$confirm("此操作将拒绝用户的领申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已拒绝领养申请!",
          });
          this.refused = "已拒绝";
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss">
.applyadoption {
  padding: 20px;
  background-color: white;
  .addpet {
    display: flex;
    justify-content: flex-end;
    .classification {
      color: #333333;
      margin: 16px;
      padding: 3px;
      font-size: 14px;
      border: none;
      border-radius: 5px;
      border: 1px solid #d3d5d7;
      cursor: pointer;
      background-color: white;
    }
  }
  .el-table .cell {
    width: 166px;
  }
  #classificationlist {
    margin-bottom: 10px;
  }
}
</style>